<template>
  <div class="member_list" v-for="item in props.memberData" :key="item.id" @click="goDetail(item)">
    <div class="member_list_l">
      <image class="member_avatar" :src="item.avatar" mode="aspectFill"></image>
      <div class="member_info">
        <div class="member_info_title">
          <span>{{ item.nameCode }}</span>
          <van-icon v-if="item.sex==1" class="male" name="manager-o" />
          <van-icon v-else class="female" name="user-o" />
        </div>
        <div class="member_hei">
          <span>{{ item.age }}</span><span class="_line">|</span><span>{{ item.height }}</span>
        </div>
      </div>
    </div>
    <div class="member_date">{{ item.watchTime }}</div>
  </div>
</template>
<script setup>
  import{ref,reactive} from 'vue';
  const props = defineProps(['memberData'])
  const goDetail = item =>{
    uni.navigateTo({
      url:'/mysub/detail/index?id='+item.id
    })
  }
</script>
<style scoped lang="scss">
.member_list{
  padding:20rpx 0;
  margin:0 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f7f7f7;
  &:last-child{
    border-bottom: 0;
  }
  .member_list_l{
    display: flex;
    .member_avatar{
      margin-right: 20rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
    }
    .member_info{
      .member_info_title{
        font-size: 28rpx;
        line-height: 40rpx;
        color: #000;
        
        .male{
          margin-left: 10rpx;
          color: #1C6AD7;
        }
        .female{
          margin-left: 10rpx;
          color: #FF6684;
        }
      }
      .member_hei{
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #ccc;
        line-height: 30rpx;
        ._line{
          margin:0 16rpx;
        }
      }
    }
  }
  .member_date{
    color: #ccc;
    font-size: 24rpx;
  }
  
}
</style>